<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>反馈列表</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 1150px;
        }
        .list{
            width: 1650px;
            height: 50px;
            margin-left: 20px;
            background-color:rgb(243,243,243);
        }
        .list-left{
            width: 100px;
            height: 30px;
            margin-top: 10px;
            float: left;
        }
        .list-left-left{
            width: 10px;
            height: 30px;
            float: left;
            background: green;
        }
        .list-left-right{
            width: 80px;
            height: 30px;
            font-size: 14px;
            line-height: 30px;
            float: left;
            text-indent: 5px;
        }
        .list-right{
            float: right;
            margin-top: 5px;
            margin-right: 45px;
        }
        .query{
            width: 1650px;
            height: 100px;
            margin-top: 20px;
        }
        .layui-col-md11{
            width: 100%;
        }
        .layui-card-header{
            width: 1620px;
            background-color:rgb(243,243,243);
        }
        .query-top-right{
            float: right;
            margin-right: 30px;
        }
        .layui-form-label{
            width: 110px;
        }
        .layui-form-item .layui-input-inline {
            float: left;
            width: 200px;
            margin-right: 10px;
        }
        .record{
            width: 1650px;
            height: 700px;
            margin-top: 40px;
            margin-left: 20px;
            background-color:rgb(243,243,243);
        }

        .record-right{
            width: 1650px;
            height: 700px;
            float: left;
        }
        /*设置数据表格的单元格样式*/
        .layui-table-cell {
            line-height: 50px;
            height: inherit;
        }
        .layui-table-cell>a{
            color:green;
        }

    </style>
</head>
<body>
<div id="app" class="box">
    <!--商品列表-->
    <div class="list">
        <div class="list-left">
            <div class="list-left-left"></div>
            <p class="list-left-right">反馈列表</p>
        </div>
        <div class="list-right">
            <div class="list-right-left layui-btn layui-icon layui-icon-refresh" id="Refresh">&nbsp;刷新</div>
            <div class="list-right-right layui-btn layui-icon layui-icon-left" id="goBack">&nbsp;返回</div>
        </div>
    </div>
    <div>

    </div>
    <!--筛选查询-->
    <div class="layui-row query">
        <div class="layui-col-md11">
            <div class="layui-card headerCenter">

                <div class="layui-card-body">
                    <form class="layui-form" lay-filter="layForm">
                        <div class="layui-form-item">
                            <div class="layui-card-header backColor">
                                <i class="layui-icon">&#xe615;</i>
                                筛选查询
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户账号：</label>
                            <div class="layui-input-inline">
                                <input placeholder="用户名称" name="account" class="layui-input" id="account"/>
                            </div>

                            <label class="layui-form-label">反馈类型：</label>
                            <div class="layui-input-inline">
                                <select lay-filter="feedbackType" name="feedbackType">
                                    <option value="">请选择类型</option>
                                    <option value="2">视频反馈</option>
                                    <option value="3">商品反馈</option>
                                    <option value="4">其他反馈</option>
                                </select>
                            </div>

                            <label class="layui-form-label">意见分类：</label>
                            <div class="layui-input-inline">
                                <select lay-filter="feedbackClassification" name="feedbackClassification">
                                    <option value="">请选择分类</option>
                                    <option value="2">很好</option>
                                    <option value="3">好</option>
                                    <option value="4">一般</option>
                                    <option value="5">差</option>
                                </select>
                            </div>
                            <label class="layui-form-label">反馈时间：</label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="请选择反馈时间" class="layui-input" name="createDate" id="createDate"/>
                                <input type="hidden" placeholder="" class="layui-input" name="feedbackStatus" id="feedbackStatus" value="3"/>
                            </div>
                            <span style="float: right;margin-right: 10px">
                                <button type="button" id="search" class="layui-btn">
                                    <i class="layui-icon layui-icon-search" ></i> 搜索
                                </button>
                                <button type="reset"  class="layui-btn layui-btn-warm">
                                    <i class="layui-icon layui-icon-refresh-3"></i> 重置
                                </button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--数据列表-->
    <div class="record">

        <div class="record-right">
            <table lay-filter="feedbackTable" id="feedbackTable"></table>
        </div>
    </div>
    <!--表头样式-->
    <div id="toolbarFunction" hidden class="layui-row" lay-filter="toolbarFunction">
        <div style="float: left;">
            <i class="layui-icon layui-icon-tabs"></i>用户反馈数据列表
        </div>
    </div>
    <div id="toolFunction" hidden>
        <sapn lay-filter="examine">审核</sapn>
    </div>
    <!-- 返回 -->
    <p id="title" style="display: none;">反馈列表</p>
</div>
</body>
<script>
    layui.use(["layer",'jquery','laydate','table','form'],function () {
        var
            form = layui.form,
            layer = layui.layer,
            $ = layui.jquery,
            laydate = layui.laydate,
            table = layui.table;
        laydate.render({
            elem:"#createDate",
            type:'datetime'
        })
        $("#search").click(function () {
            var layForm = form.val("layForm");
            layForm = {
                "account":layForm.account,
                "feedbackType":layForm.feedbackType,
                "feedbackClassification":layForm.feedbackClassification,
                "createDate":layForm.createDate
                ,"feedbackStatus":3
            };
            getFeedbackStatus(layForm);
        });
        $("#Refresh").click(function () {
            location.reload();
        });
        //返回
        $('#goBack').click(function () {
            var title = $('#title').text();
            var iframe = parent.$('.iframe');
            $.each(iframe,function (i,item) {
                if(title == $(item).attr('_href')){
                    parent.$('#beforeHref').val($(item).attr('_href'));
                    parent.beforeHref();
                    return;
                }
            });
        });
        var layForm = form.val("layForm");
        layForm = {
            "":'',
            "":'',
            "":'',
            "":'',
            "feedbackStatus":3,
        };
        getFeedbackStatus(layForm);
        function getFeedbackStatus(layForm){
            $.ajax({
                url:"/JsUserFeedback/getAllFeedbackStatus",
                data:layForm,
                type:'post',
                dataType:'json',
                success:function (data) {
                    tableRender(data.data);
                }
            })
        }

        function tableRender(data){
            table.render({
                elem:"#feedbackTable",
                data:data,
                toolbar:"#toolbarFunction",
                cols:[[
                    {type:'checkbox'},
                    {field:"",title:"序号",align:"center",templet:function (data) {
                            return data.LAY_INDEX;
                        }},
                    {field:"account",title:"用户账号",align:"center"},
                    {field:"feedbackType",title:"意见反馈类型",align:"center",templet:function (data) {
                            if (data.feedbackType == "2"){
                                return "视频反馈";
                            } else if (data.feedbackType == "3"){
                                return "商品反馈";
                            } else{
                                return "其他反馈";
                            }
                        }},
                    {field:"feedbackClassification",title:"意见分类",align:"center",templet:function (data) {
                            if (data.feedbackClassification == "2"){
                                return "很好";
                            }else if(data.feedbackClassification == "3"){
                                return "好";
                            }else if(data.feedbackClassification == "4"){
                                return "一般";
                            }else{
                                return "差";
                            }
                        }},
                    {field:"createDate",title:"反馈时间",align:"center"},
                    {field:"feedbackContent",title:"反馈内容",align:"center"},
                    {field:"",title:"操作",align:"center",templet:function (data) {
                            localStorage.setItem("feedbackData",JSON.stringify(data));
                            return "<a onclick= 'javascript:examine(\"" + data + "\");'>" +"审核"+"</a>";
                        }}
                ]],
                page:true
            })


            examine = function examine(data) {
                var feedbackData = JSON.parse(localStorage.getItem("feedbackData"));
                layer.open({
                    type:2,
                    title:'反馈审核',
                    area:["750px","700px"],
                    btn:["通过","取消"],
                    Boolean:true,
                    maxmin:true,
                    offset:['50px','400px'],
                    content:'feedback-examine.html',
                    success:function (layero,index) {
                        var obj = layero.find('iframe').contents();
                        obj.find("input[name=account]").val(feedbackData.account);
                        obj.find("input[name=feedbackType]").val(feedbackData.feedbackType);
                        if (data.feedbackType == "2"){
                            obj.find("input[name=feedbackTypeName]").val("视频反馈");
                        } else if (data.feedbackType == "3"){
                            obj.find("input[name=feedbackTypeName]").val("商品反馈");
                        } else{
                            obj.find("input[name=feedbackTypeName]").val("其他反馈");
                        }
                        obj.find("input[name=feedbackClassification]").val(feedbackData.feedbackClassification);
                        if (data.feedbackClassification == "2"){
                            obj.find("input[name=feedbackClassificationName]").val("很好");
                        }else if(data.feedbackClassification == "3"){
                            obj.find("input[name=feedbackClassificationName]").val("好");
                        }else if(data.feedbackClassification == "4"){
                            obj.find("input[name=feedbackClassificationName]").val("一般");
                        }else{
                            obj.find("input[name=feedbackClassificationName]").val("差");
                        }
                        obj.find("input[name=createDate]").val(feedbackData.createDate);
                        obj.find("#feedbackContent").text(feedbackData.feedbackContent);
                        obj.find("#feedbackId").val(feedbackData.feedbackId);

                        obj.find("#img").attr('src',feedbackData.pictureUrl);

                    },
                    yes:function(index,layero){
                        var obj = layero.find('iframe').contents();
                        var feedbackId = obj.find("#feedbackId").val();
                        //现在时间
                        function getTime(){
                            var date=new Date();
                            var year=date.getFullYear();
                            var month=date.getMonth()+1;
                            var day=date.getDate();
                            var hour=date.getHours();
                            var minute=date.getMinutes();
                            var second=date.getSeconds();
                            var dateStr = year+"-"+zeroFilling(month)+"-"+zeroFilling(day)+" "+zeroFilling(hour)+":"+zeroFilling(minute)+":"+zeroFilling(second);
                            return dateStr;
                        }
                        function zeroFilling(data){
                            if(data<10){
                                data="0"+data;
                            }
                            return data;
                        }
                        var user = JSON.parse(localStorage.getItem('user'));
                        var userId = user.data.userId;
                        $.ajax({
                            url:"/JsUserFeedback/updateByIdStatus",
                            data:{"feedbackId":feedbackId,"updateId":userId,"updateDate":getTime()},
                            type:'post',
                            dataType:'json',
                            success:function (data) {
                                layer.close(index);
                            }
                        })
                    },
                    btn2:function(index,layero){

                    },
                    end:function (layero, index) {
                        getFeedbackStatus(layForm);
                    }
                })
            }

        }
    })
</script>
</html>